<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="__PUBLIC__/js/bootstrapvalidator/css/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="__PUBLIC__/js/jquery-upload/css/jquery.fileupload.css" />
    <link rel="stylesheet" href="__PUBLIC__/js/jquery-upload/css/jquery.fileupload-ui.css" />
    <script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/vendor/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload-ui.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload-process.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
</head>
<body>
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel"><if condition="$id">修改独立工作区<else/>添加独立工作区</if></h4>
        </div>
        <form class="form-horizontal" style="padding:4%;height:450px;overflow-y:auto;" id="officeRoomForm">
            <input type="hidden" name="token" value="{$formToken}">
            <input type="hidden" name="id" value="{$id}"/>
            <div class="form-group">
                <label class="control-label col-sm-3">所属空间:</label>
                <div class="col-sm-8">
                    <select class="form-control" name="space_id" id="space_id">
                        <foreach name="spaceList" item="space">
                            <option value="{$space.id}" <if condition="$office['space_id'] eq $space['id']">selected</if>>{$space.name}</option>
                        </foreach>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">工作区编号:</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="room_no" value="{$office.room_no}" placeholder="请输入工作区编号">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">空间面积:</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input type="text" class="form-control" name="area" value="{$office.area}" placeholder="请输入空间面积">
                        <div class="input-group-addon">M&sup2;</div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">整租价格:</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input type="text" class="form-control" name="rent_price" value="{$office.rent_price}" placeholder="请输入整租价格">
                        <div class="input-group-addon">元/月</div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">工位单价:</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input type="text" class="form-control" name="unit_price" value="{$office.unit_price}" placeholder="请输入工位单价">
                        <div class="input-group-addon">元/月</div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">是否启用:</label>
                <div class="col-sm-8">
                    <input type="checkbox" name="_status" value="{$office.status|default="1"}" />
                    <input type="hidden" name="status" value="{$office.status|default="1"}" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">备注:</label>
                <div class="col-sm-8">
                    <textarea rows="4" class="form-control" name="remark" placeholder="200字以内">{$office.remark}</textarea>
                </div>
            </div>
        </form>
        <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
            <button type="button" id="save" class="btn btn-primary">保存</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    var webRoot = "__ROOT__";
    $(function(){
        $("#save").bind("click",doSave);
        initSwitchOption("_status","是","否","{$office.status|default="1"}");
    });

    function initSwitchOption(name,onText,offText,state) {
        var switchOption = {
            onText: onText,
            offText: offText,
            onColor: "success",
            offColor: "info",
            state: state == 1 ? true : false,
            onSwitchChange: function (event, state) {
                if (state == true) {
                    $(this).val("1");
                } else {
                    console.log(state);
                    $(this).val("0");
                }
                var value = $(this).val();
                $("input:hidden[name='"+name.substring(1)+"']").val(value);
            }
        };
        $("input:checkbox[name='"+name+"']").bootstrapSwitch(switchOption);
    }

    var commitFlag = false;
    function doSave(){
        if(commitFlag){
            common.alert("提示","请勿重复提交");
            return;
        }
        commitFlag = true;
        if(!validateForm()){
            commitFlag = false;
            return false;
        }
        $.ajax({
            url: "{:U('Admin/Space/Spaces/doSaveOfficeRoom')}",
            type: "post",
            dataType: "json",
            data: $("#officeRoomForm").serialize(),
            success: function (data) {
                if(data.status){
                    common.alert("提示",data.msg,function(){
                        common.reload();
                    });
                }else{
                    commitFlag = false;
                    common.alert("提示",data.msg);
                }
            }
        });
    }

    function validateForm(){
        $('#officeRoomForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                //invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                room_no: {
                    validators: {
                        notEmpty: {
                            message: '工作区编号不能为空'
                        }
                    }
                },
                space_id: {
                    validators: {
                        notEmpty: {
                            message: '所属空间不能为空'
                        }
                    }
                },
                area: {
                    validators: {
                        notEmpty: {
                            message: '空间面积不能为空'
                        },
                        regexp: {
                            regexp: /((^[1-9]+[0-9]*)|^0)(\.\d{0,2})?$/,
                            message: '空间面积必须为数字，最多2位小数'
                        }
                    }
                },
                rent_price: {
                    validators: {
                        notEmpty: {
                            message: '整租价格不能为空'
                        },
                        regexp: {
                            regexp: /((^[1-9]+[0-9]*)|^0)(\.\d{0,2})?$/,
                            message: '整租价格必须为数字，最多2位小数'
                        }
                    }
                },
                unit_price: {
                    validators: {
                        notEmpty: {
                            message: '工位单价不能为空'
                        },
                        regexp: {
                            regexp: /((^[1-9]+[0-9]*)|^0)(\.\d{0,2})?$/,
                            message: '工位单价必须为数字，最多2位小数'
                        }
                    }
                }
            }
        });
        var data = $('#officeRoomForm').data('bootstrapValidator');
        if (data) {
            data.validate();
            if (!data.isValid()) {
                return false;
            }
        }
        return true;
    }
</script>
</body>
</html>